<template>
  <div class="hello">
    <h1>基类 Cell</h1>
    <el-button type="" @click="add">add node</el-button>
    <el-button type="" @click="parentAction">add parent</el-button>
    <el-button type="" @click="addNode">add Node Config</el-button>
    <div id="container2"></div>
  </div>
</template>

<script>
import { Shape, Graph, DataUri, minimapContainer } from "@antv/x6";

export default {
  name: "Cell",
  data() {
    return {
      activeName: "1",
      graph: "",
      data: {
        nodes: [],
        // 边
        edges: [],
      },
      rectConfig: {
        width: 80,
        height: 40,
        markup: [
          {
            tagName: "rect",
            selector: "body",
          },
          {
            tagName: "text",
            selector: "label",
          },
        ],
        attrs: {
          body: {
            fill: "#fff",
            stroke: "#000",
            strokeWidth: 2,
          },
          label: {
            fontSize: 14,
            fill: "#333",
            fontFamily: "Arial, helvetica, sans-serif",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    /*Shape.Rect	rect	矩形。
      Shape.Circle	circle	圆形。
      Shape.Ellipse	ellipse	椭圆。
      Shape.Polygon	polygon	多边形。
      Shape.Polyline	polyline	折线。
      Shape.Path	path	路径。
      Shape.Image	image	图片。
      Shape.HTML	html	HTML 节点，使用 foreignObject 渲染 HTML 片段。
      Shape.TextBlock	text-block	文本节点，使用 foreignObject 渲染文本。
      Shape.BorderedImage	image-bordered	带边框的图片。
      Shape.EmbeddedImage	image-embedded	内嵌入矩形的图片。
      Shape.InscribedImage	image-inscribed	内嵌入椭圆的图片。
      Shape.Cylinder	cylinder	圆柱。 */
    init() {
      let width = document.body.clientWidth; //网页可见区域宽：
      let height = document.body.clientHeight; //网页可见区域高：
      const graph = new Graph({
        container: document.getElementById("container2"),
        width,
        height: 900,
        panning: {
          enabled: true, //画布可以平移
        },

        background: {
          color: "#fffbe6", // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
        minimap: {
          enabled: true,
          container: minimapContainer,
        },
      });

      graph.centerContent(); //内容居中
      graph.fromJSON(this.data);
      this.graph = graph;
    },
    add() {
      const rect = new Shape.Rect({
        id: "node1",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        attrs: {
          // 指定 rect 元素的样式
          // body: {
          //   stroke: "#000", // 边框颜色
          //   fill: "yellow", // 填充颜色
          // },
          // // 指定 text 元素的样式
          // label: {
          //   text: "rect", // 文字
          //   fill: "#333", // 文字颜色
          // },
          rect: {
            // 使用 rect css 选择器替代预定义的 body 选择器
            fill: "#2ECC71",
            stroke: "#000",
          },
          text: {
            // 使用 text css 选择器替代预定义的 label 选择器
            text: "rect",
            fill: "#333",
            fontSize: 13,
          },
        },
        data: { list: [1, 2, 3, 4] },
        zIndex: 2,
        markup: [
          {
            tagName: "rect",
            selector: "body",
          },
          {
            tagName: "text",
            selector: "label",
          },
        ],
      });

      const circle = new Shape.Circle({
        id: "node2",
        x: 280,
        y: 200,
        width: 60,
        height: 60,
        label: "circle",
        markup: [
          {
            tagName: "rect",
            selector: "body",
          },
          {
            tagName: "text",
            selector: "label",
          },
        ],
        zIndex: 2,
      });

      const edge = new Shape.Edge({
        id: "edge1",
        source: rect,
        target: circle,
        zIndex: 1,
      });
      this.graph.addNode(rect);
      this.graph.addNode(circle);
      this.graph.addEdge(edge);
    },
    parentAction() {
      console.log("parentAction");
      this.graph.addNode({
        x: 280,
        y: 300,
        shape: "rect",
        parent: "node2", //父节点id
        width: 80,
        height: 40,
        label: "parent",
      });
    },
    addNode() {
      Shape.Rect.config({
        width: 80,
        height: 40,
        markup: [
          {
            tagName: "rect",
            selector: "body",
          },
          {
            tagName: "text",
            selector: "label",
          },
        ],
        attrs: {
          body: {
            fill: "#fff",
            stroke: "red",
            strokeWidth: 2,
          },
          label: {
            fontSize: 14,
            fill: "#333",
            fontFamily: "Arial, helvetica, sans-serif",
            textAnchor: "middle",
            textVerticalAnchor: "middle",
          },
        },
      });
      const rect = this.graph.addNode({
        x: 100,
        y: 100,
        attrs: {
          label: {
            text: "rect",
          },
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.hello {
  width: 100%;
  height: 1000px;
}
#container {
  width: 100%;
  height: 100%;
}
.x6-node rect {
  fill: #2ecc71;
  stroke: #000;
}
</style>
